<template>
  <ul>
    <li v-for="item in menuArr" :key="item.path" @click="jumpTo(item.path)">
      <el-button type="primary" link>{{ item.label }}</el-button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref, Ref, reactive, watch, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// 在 setup 中，获取 this.$route 和 this.$router
const route = useRoute();
const router = useRouter();

/* ************* 定义标题 **************** */
/**
Ref 是 ts 设置泛型的函数
export interface Ref<T = any> {
  value: T;
  [RefSymbol]: true;
}
 */
// let title: Ref<string> = ref('')
let title = ref<string>('');

/* ************* 定义菜单路由 **************** */
const menuArr = ref([
  {
    label: 'bus 事件总线 mitt库',
    path: '/vue3Advance/busPage',
  },
  {
    label: '自定义 v-model, v-model修饰，v-model 绑定多个值',
    path: '/vue3Advance/customVmodelPage',
  },
  {
    label: 'slot 作用域范围，将子slot的值传递给父组件渲染',
    path: '/vue3Advance/slotRange',
  },
  {
    label: 'tailWindCss 库的学习',
    path: '/vue3Advance/tailWindCss',
  },
  {
    label: 'compToHtml 组件转HTML',
    path: '/vue3Advance/compToHtml',
  },
  // {
  //   label: '',
  //   path: '/vue3Advance/',
  // },
  // {
  //   label: '',
  //   path: '/vue3Advance/',
  // },
  // {
  //   label: '',
  //   path: '/vue3Advance/',
  // },
]);

// 跳转到指定的路由地址
function jumpTo(pathUrl: string) {
  router.push({ path: pathUrl });
}

/* ************* 生命周期函数 **************** */
onMounted(() => {
  title.value = String(route.meta.title) || '标题';
});
</script>

<style scoped lang="scss"></style>
